<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('课程导航')"/>
        <th:block th:include="include :: layout-latest-css"/>
        <th:block th:include="include :: ztree-css"/>
        <style>
            .content {
                width: 800px;
                margin: 0 auto;
                background: #fff;
                border-radius: 6px;
                margin-top: 10px;
                padding-top: 5px;
                padding-bottom: 13px;
                box-shadow: 1px 1px 3px rgb(0 0 0 20%);

            }

            .item {
                padding-top: 10px;
            }

            .item a {
                color: #333;
                outline: none;
            }

            .item a:HOVER {
                background-color: yellow;
                text-decoration: none;
            }

            .cover {
                width: 180px;
                height: 120px;
                margin: auto;
            }

            .cover img {
                width: 180px;
                height: 120px;
            }

            .item-right {
                padding-top: 20px;
            }

            .line {
                line-height: 30px;
                margin-left: -50px;
            }

            .title {
                font-size: 16px;
                font-weight: bold;
            }

            .border {
                width: 100%;
                height: 1px;
                border-bottom: #1a1a1a;
                border-bottom-width: 1px;
            }

            .rate {
                margin-bottom: 4px;
            }
        </style>
    </head>
    <body class="gray-bg">
        <div class="ui-layout-west">
            <div class="box box-main">
                <div class="box-header">

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开">
                            <i class="fa fa-chevron-up"></i>展开
                        </button>
                        <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"
                                style="display:none;"><i
                                class="fa fa-chevron-down"></i>折叠
                        </button>

                    </div>
                </div>
                <div class="ui-layout-content">
                    <div id="tree" class="ztree"></div>
                </div>
            </div>
        </div>
        <div class="ui-layout-center">
            <div class="container-div">
                <div class="row">
                    <div class="col-sm-12 search-collapse">
                        <form id="formId">

                            <input id="pageSize" name="pageSize" type="hidden" value="10"/>
                            <input id="pageNum" name="pageNum" type="hidden" value="1"/>
                            <div class="select-list">
                                <ul>
                                    <li style="width: 270px;">
                                        <label>所属学科：</label>
                                        <div class="input-group">
                                            <input id="treeId" name="subjectId" type="hidden"/>
                                            <input class="form-control" type="text" onclick="selectManageTree()"
                                                   id="treeName" readonly="true">
                                            <span class="input-group-addon"><i class="fa fa-remove"
                                                                               id="clearBtn"></i></span>
                                        </div>
                                    </li>
                                    <li>
                                        <label>课程名称：</label>
                                        <input type="text" name="courseName" placeholder="请输入关键字"/>
                                    </li>

                                    <li>
                                        <label>课程学分：</label>
                                        <select name="courseScore"
                                                th:with="type=${@dict.getType('course_score_value')}">
                                            <option value="">所有</option>
                                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                                    th:value="${dict.dictValue}"></option>
                                        </select>
                                    </li>
                                    <li>
                                        <label>项目类型：</label>
                                        <select name="projectType"
                                                th:with="type=${@dict.getType('course_project_type')}">
                                            <option value="">所有</option>
                                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                                    th:value="${dict.dictValue}"></option>
                                        </select>
                                    </li>

                                    <li>
                                        <a class="btn btn-primary btn-rounded btn-sm" onclick="doSearch()"><i
                                                class="fa fa-search"></i>&nbsp;搜索</a>
                                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset();doSearch()"><i
                                                class="fa fa-refresh"></i>&nbsp;重置</a>
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>


                    <div class="col-sm-12  ">
                        <div class="content" >
                            <div id="content">
                                <div class="row item">
                                    <div class="row">
                                        <div class="col-sm-4 ">
                                            <div class="cover">
                                                <img src="/img/qr_code.png" alt="">
                                            </div>
                                        </div>
                                        <div class="col-sm-8 item-right">
                                            <div class="row line">
                                                <div class="col-sm-6 title">脊柱外科基础知识与前沿技术</div>
                                                <div class="col-sm-6">关注度: <img src="/img/xin_5.gif" alt=""
                                                                                class="rate"></div>
                                            </div>
                                            <div class="row line">
                                                <div class="col-sm-6">国家I类 5.0学分</div>
                                                <div class="col-sm-6">项目编号： 2021-04-07-455 (国)</div>
                                            </div>
                                            <div class="row line">
                                                <div class="col-sm-6">项目负责人： 肖斌</div>
                                                <div class="col-sm-6">单位： 北京积水潭医院/北京</div>
                                            </div>

                                        </div>
                                    </div>
                                    <hr>
                                </div>

                            </div>

                            <div class="row">
                                <div style="width: 610px;margin: 0 auto">
                                    <ul class="pagination" id="pagination1"></ul>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: layout-latest-js"/>
        <th:block th:include="include :: ztree-js"/>
        <th:block th:include="include :: jqPaginator-js"/>
        <script th:inline="javascript">

            var courseScoreDatas     = [[${@dict.getType('course_score_value')}]];
            var projectTypeDatas     = [[${@dict.getType('course_project_type')}]];
            var courseScoreTypeDatas = [[${@dict.getType('course_score_type')}]];
            var prefix               = ctx + "biz/courseNav";
            var currentPage = 1
            // $('#content').html('') // 清空列表数据
            $(function () {

                var panehHidden = false;
                if ($(this).width() < 769) {
                    panehHidden = true;
                }
                $('body').layout({initClosed: panehHidden, west__size: 185});

                querySubjectTree()

                doSearch()

                initClickEvent()

            });

            function initClickEvent() {
                $('#btnExpand').click(function () {
                    $._tree.expandAll(true);
                    $(this).hide();
                    $('#btnCollapse').show();
                });

                $('#btnCollapse').click(function () {
                    $._tree.expandAll(false);
                    $(this).hide();
                    $('#btnExpand').show();
                });

                $('#btnRefresh').click(function () {
                    querySubjectTree();
                });

                $('#clearBtn').click(function () {
                    $("#treeId").val('');
                    $("#treeName").val('');
                    doSearch()
                })

                $('select').change(function(){
                    doSearch()
                })

                $('input[name="courseName"]').blur(function (){
                    // if (!$(this).val()) return
                    doSearch()
                })

            }

            /*学科管理-新增-选择父部门树*/
            function selectManageTree() {
                var options = {
                    title: '学科选择',
                    width: "600",
                    url: ctx + "biz/courseNav/selectManageTree/" + $("#treeId").val(),
                    callBack: treeCallBack
                };
                $.modal.openOptions(options);
            }

            function treeCallBack(index, layero) {
                var body = layer.getChildFrame('body', index);
                $("#treeId").val(body.find('#treeId').val());
                $("#treeName").val(body.find('#treeName').val());
                layer.close(index);
                doSearch()
            }

            function querySubjectTree() {
                var url     = ctx + "biz/subject/treeData";
                var options = {
                    url: url,
                    expandLevel: 2,
                    onClick: zOnClick
                };
                $.tree.init(options);

                function zOnClick(event, treeId, treeNode) {
                    $("#treeId").val(treeNode.id);
                    $("#treeName").val(treeNode.name);
                    doSearch()
                }
            }

            function doSearch() {
                var query = $('#formId').serializeObject()
                console.log(query)
                $.modal.loading("请稍等...");
                $.post(prefix + '/list', query, function (result) {
                    if (result.code == web_status.SUCCESS) {
                        const rows  = result.rows
                        const total = result.total

                        renderContent(rows)
                        renderPaginate(total)
                    } else {
                        $.modal.alertError(result.msg);
                    }
                    $.modal.closeLoading();

                });
            }

            function renderContent(rows) {
                // 清空旧数据
                $('#content').html('')
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i]
                    const {
                              courseName,
                              courseScore,
                              coverUrl,
                              focusScore,
                              id,
                              projectLeader,
                              projectNumber,
                              projectOrg,
                              projectType
                          } = row
                    const projectTypeStr = $.table.selectDictLabel(projectTypeDatas, projectType)
                    const url =  prefix +'/contentList/'+id
                    const content = template.replace('_courseName',courseName)
                                            .replace('_courseScore',courseScore)
                                            .replace('_coverUrl',coverUrl)
                                            .replace('_focusScore',focusScore)
                                            .replace('_url',url)
                                            .replace('_id',id)
                                            .replace('_projectLeader',projectLeader)
                                            .replace('_projectNumber',projectNumber)
                                            .replace('_projectOrg',projectOrg)
                                            .replace('_projectTypeStr',projectTypeStr)
                    $('#content').append(content)
                }
            }

            function renderPaginate(total) {

                $('#pagination1').jqPaginator({
                                                  totalCounts: total||1,
                                                  visiblePages: 10,
                                                  pageSize: 10,
                                                  currentPage: currentPage,

                                                  first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
                                                  prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
                                                  next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
                                                  last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
                                                  page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
                                                  onPageChange: function (num) {
                                                      $('#pageNum').val(num)
                                                      console.log('currentPage = '+currentPage+' ,num = '+num)
                                                      if (+currentPage == +num) return
                                                      doSearch()
                                                      currentPage = num
                                                  }
                                              });
            }

            function toDetailList(id){
                const url =  prefix +'/contentList/'+id
                $.modal.openTab("课程内容列表", url);
            }

            $.fn.serializeObject = function () {
                var o = {};
                var a = this.serializeArray();
                $.each(a, function () {
                    if (o[this.name] !== undefined) {
                        if (!o[this.name].push) {
                            o[this.name] = [o[this.name]];
                        }
                        o[this.name].push(this.value || '');
                    } else {
                        o[this.name] = this.value || '';
                    }
                });
                return o;
            }
        </script>
        <script>
            var template = '<div class="row item">' +
                '<div class="row">' +
                '    <a href="#" onclick="toDetailList(_id)">' +
                '        <div class="col-sm-4 ">' +
                '            <div class="cover">' +
                '                <img src="_coverUrl">' +
                '            </div>' +
                '        </div>' +
                '        <div class="col-sm-8 item-right">' +
                '            <div class="row line">' +
                '                <div class="col-sm-6 title">_courseName</div>' +
                '                <div class="col-sm-6">关注度:  <img src="/img/xin__focusScore.gif"  class="rate"></div>' +
                '            </div>' +
                '            <div class="row line">' +
                '                <div class="col-sm-6">_projectTypeStr _courseScore.0学分</div>' +
                '                <div class="col-sm-6">项目编号： _projectNumber</div>' +
                '            </div>' +
                '            <div class="row line">' +
                '                <div class="col-sm-6">项目负责人： _projectLeader</div>' +
                '                <div class="col-sm-6">单位： _projectOrg</div>' +
                '            </div>' +
                '' +
                '        </div>' +
                '    </a>' +
                '</div>' +
                '<hr>' +
                '</div>'
        </script>
    </body>
</html>